<template>
	<div>
	<scroll-view scroll-y="true" class="neiron" >
			
		<view class="bookcenten" >
			
			<checkbox-group :value="thatchecked" name="" @change="checkedBooke" class="bookList">
				
				<label v-for="(item,index) in books" :key="index"  >
					<view class="BookItem" @click="readbookbyId" :id="item.id + ''">
							<image :src="item.imageUrl" mode=""></image>
							<text>{{item.name}}</text>
							<checkbox 
							  :value="item.id + ''" 
							  :class="{hidde:isHidde,checkboxed:defulatClass}"  :checked="isHidde"/>
					</view>	
				</label>
				
			</checkbox-group>`
					
		</view>
		
		
	</scroll-view>
	</div>
</template>

<script>
	
	export default {
		props: {
			isHidde: {
				type: Boolean,
				default: true
			},
		},
		created() {
			this.books = this.$store.state.user.readbook[0]
				},
		data() {
			return {
				books:'',
				defulatClass:true,
				thatchecked:'',
				sortWay:true
			}
		},
		methods: {
			checkedBooke(event) {
				if(this.isHidde){
						return 
				}else{
					this.thatchecked = event.target.value
					this.$emit('checkedBooks',event.target.value)
					
				}
			},
			sortData(){
				// 如果soarWay = false就是逆序，否则就是正序ture
				this.sortWay = !this.sortWay
				if(!this.sortWay){
					
					this.books.sort( (pre,next)=>{
							if( pre.id > next.id ){return -1}
							else if(pre.id < next.id){ return 1 }
							else{ return 0 }
					})
					
				}else{
					this.books.sort( (pre,next)=>{
							if( pre.id < next.id ){return -1}
							else if(pre.id > next.id){ return 1 }
							else{ return 0 }
					})
				}
			},
			readbookbyId(value){
				if(this.isHidde){
					let { id } = value.currentTarget
					id = parseInt(id)
					uni.navigateTo({
						url:`/pages/reader/reader?id=`+id
					})					
				}else{
					
				}
			}
		},
		watch:{
			isHidde(){
				this.thatchecked = ''
			}
		}
	}
</script>

<style scoped>

	/* item卡片 */
	
	.bookList{
		display: flex;
		background-color: #FFFFFF;
		flex-wrap:wrap;
		
	}
	
	.BookItem{
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		margin: 1vh;
		width: 12vh;
		height: 14vh;
		flex-shrink:0;
	}
	
	.BookItem image{
		width: 85%;
		height: 90%;
	}
	.neiron{
		height:68vh;
		
	}
	
	.checkboxed{
		position: absolute;
		left: 7vh;
		top: 6vh;
	}
	.hidde{
		display: none;
	}
	
</style>